{extend name="Public:base" /}

<!-- 标题 -->
{block name="title"}<title>添加角色</title>{/block}
<!-- 面包屑导航 -->
{block name="navigation"}
<section class="content-header">
	<h1>添加角色<small></small></h1>
	<ol class="breadcrumb">
		<li><a href="{:url('index/index')}"><i class="fa fa-dashboard"></i> 主页</a></li>
		<li class="active">角色管理</li>
	</ol>
</section>
{/block} 

<!-- 内容 -->
{block name="content"}
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
	
	<ul class="nav nav-tabs">
		<li><a href="{:url('manager/rolesList')}">角色列表</a></li>
		<li class="active"><a href="#tab_1" data-toggle="tab">添加角色</a></li>
		<li class="pull-right"><a href="#" class="text-muted" ><i class="fa fa-gear"></i></a></li>
	</ul>
	
	<div class="tab-content">
		<div class="tab-pane active" id="tab_1" style="max-width:800px;">
			 
				<form role="form" action="{:url('manager/rolesSave')}" id="form-add">
					<input type="hidden" name="id" value="0"/>
					 
					<div class="form-group">
						<label for="title">名称</label>
						<input type="text" class="form-control" id="title" name="title" autocomplete="off" placeholder="名称">
					</div>
					  
					<div class="form-group">
						<label>
							<input type="radio" name="status" id="status1" value="1" class="flat-red" checked> 正常
						</label>
						<label>
							<input type="radio" name="status" id="status2" class="flat-red" value="0"> 禁用
						</label>
					</div>
					
					<div class="form-group">
						<label for="title">权限</label>
						<br/>
						<table class="table table-bordered">
							{foreach $rules as $v}
							<tr>
								<td style="width:20%;">
									<label>
										<input type="checkbox" class="rules0" name="rules[]" value="{$v['id']}"> {$v['title']}  
									</label>
								</td>
								<td style="width:80%;">
									{foreach $v['child'] as $vo}
									<label>
										<input type="checkbox" class="rules1" name="rules[]" value="{$vo['id']}"> {$vo['title']}  
									</label>
									{/foreach}   
								</td>
							</tr>
							{/foreach} 
						</table>
					</div>
					
					
					<button class="btn btn-success" type="submit">保存</button>	 
				</form>
			 
		  
		</div><!-- /.tab-pane -->
 
	</div><!-- /.tab-content -->
</div><!-- nav-tabs-custom -->
 

{/block}

<!-- js -->
{block name="js"}
 	
	<script type="text/javascript">
		$(function () {
		
			$('input[type="checkbox"].rules0').on('click',function(){
				var value = $(this).prop('checked'); 
				var input = $(this).closest('td').next('td').find('.rules1');
				if(value == true){
					 $.each( input, function(i, n){
					   $(this).prop('checked',true);
					});
				}else{
					$.each( input, function(i, n){
					   $(this).prop('checked',false);
					}); 
				}
 
			});
		 
			 $('input[type="checkbox"].rules1').on('click',function(){
				var value = $(this).prop('checked'); 
				var input = $(this).closest('td').find('.rules1'); 
				var oneinput = $(this).closest('td').prev('td').find('.rules0');
				if(value == true){
					oneinput.prop('checked',true);
				}else{
					var all = true;
					$.each( input, function(i, n){
					   if($(this).prop('checked') == true){
							all = false;
					   }
					});
					if(all == true){
						oneinput.prop('checked',false);
					}
					 
				}
			});
		});
  
		//表单提交
    	$(document)
	    	.ajaxStart(function(){
	    		$("button:submit").addClass("btn-default").removeClass('btn-primary').attr("disabled", true);
	    	})
	    	.ajaxStop(function(){
	    		$("button:submit").removeClass("btn-default").addClass("btn-primary").attr("disabled", false);
	    	});

    	$("form").submit(function(){
			 
    		var self = $(this);
    		$.post(self.attr("action"), self.serialize(), success, "json");
    		return false;

    		function success(data){
    			if(data.status){
    				layer.msg(data.msg, {
						icon:1,
						offset: 0,
						shift: 0,
						time:1500
					},function(){
						window.location.reload();//刷新当前页面 ;
					});
    			} else {
    				layer.msg(data.msg, {
						icon:0,
						offset: 0,
						shift: 6,
						time:1500
					}); 
    				 
    			}
    		}
    	});
	</script>

{/block}